<script lang="ts" setup>
import {storeToRefs} from "pinia";
import ProjectTaskForm from './components/ProjectTaskForm.vue'

defineOptions({name: "ProjectTask"})

import {useTableColumnStore} from "@/store/modules/tableColumn";
import * as projectTaskApi from "@/api/business/project/projectTask";

const message = useMessage()
const {t} = useI18n()
const tableColumnStore = useTableColumnStore()
const {projectTask: columns} = storeToRefs(tableColumnStore)

const showSearch = ref(true)
const loading = ref(false)
const queryFormRef = useTemplateRef("queryFormRef")
const total = ref(10)
const queryParams = ref({
  taskName: void 0,
  director: void 0,
})

function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

function resetQuery() {
  queryFormRef.value?.resetFields()
  handleQuery()
}


const checkedIds = ref([])
const list = ref([])

async function getList() {
  try {
    loading.value = true
    const data = await projectTaskApi.getProjectTaskPage(queryParams.value)
    console.log(data, 11111)
    total.value = data.total
    list.value = data.list
  } finally {
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
}

onActivated(() => getList())

function handleRowCheckboxChange(rows: projectTaskApi.ProjectTaskVO[]) {
  checkedIds.value = rows.map((row) => row.id)
}

const handleDelete = async (id?: string) => {
  try {
    if (!id && checkedIds.value.length == 0) return message.warning('请选择项目任务')
    // 删除的二次确认
    await message.delConfirm()
    let ids
    if (id) {
      ids = [id]
    } else {
      ids = checkedIds.value
    }
    // 发起批量删除
    await projectTaskApi.delProjectTaskList(ids)
    checkedIds.value = []
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch (e) {
    console.log(e, 111111)
  }
}

const projectTaskFromRef = useTemplateRef('projectTaskFromRef')

function openForm(type: string, id?: string) {
  projectTaskFromRef.value?.open(type, id)
}
</script>

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form v-show="showSearch" ref="queryFormRef" :inline="true" :model="queryParams"
             class="-mb-15px" label-width="68px">
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="queryParams.taskName" class="!w-240px" clearable
                  placeholder="请输入任务名称"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="负责人" prop="director">
        <el-input v-model="queryParams.director" class="!w-240px" clearable
                  placeholder="请输入负责人"
                  @keyup.enter="handleQuery"/>
      </el-form-item>

      <el-form-item>
        <el-button plain type="primary" @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" align="middle" class="mt4 mb4" justify="space-between">
      <el-col :span="5">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button icon="Plus" plain type="primary" @click="openForm('add')">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="Delete" plain type="danger" @click="handleDelete()">删除
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <right-toolbar v-model:columns="columns" v-model:showSearch="showSearch"
                       @queryTable="handleQuery"></right-toolbar>
      </el-col>
    </el-row>
    <!-- 列表 -->
  </ContentWrap>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="55"/>
      <el-table-column v-if="columns[0].visible" align="center" label="任务名称" prop="taskName"/>
      <el-table-column v-if="columns[1].visible" align="center" label="负责人" prop="director"/>
      <el-table-column v-if="columns[2].visible" align="center" label="任务内容" prop="content"/>
      <el-table-column v-if="columns[3].visible" align="center" label="状态" prop="state"/>
      <el-table-column v-if="columns[4].visible" align="center" label="分值" prop="score"/>
      <el-table-column v-if="columns[5].visible" align="center" label="备注" prop="remake"/>
      <el-table-column align="center" fixed="right" label="操作" min-width="250">
        <template v-slot="{row}">
          <el-button icon="View" link type="primary" @click="openForm('detail',row.id)">详情
          </el-button>
          <el-button icon="Edit" link type="primary" @click="openForm('edit',row.id)"> 编辑
          </el-button>
          <el-button icon="List" link type="primary"> 物料清单</el-button>
          <el-button icon="Delete" link type="primary" @click="handleDelete(row.id)"> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
  <ProjectTaskForm ref="projectTaskFromRef"></ProjectTaskForm>
</template>

<style lang="scss" scoped>

</style>
